<!DOCTYPE html>
<html>
    <head>
        <title>Level editor</title>
        <link href='http://fonts.googleapis.com/css?family=Underdog&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
        <link href='css/reset.css' rel='stylesheet' type='text/css'>
        <link href='css/styles.css' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="js/require.config.js"></script>
        <script type="text/javascript" data-main="app" src="js/libs/require.min.js"></script>
    </head>
    <body>
        <button data-bind="click: saveLevel">Save Level</button>
        <div id="scene" data-bind="click: deactivateAll, style: {backgroundImage: backImageCSS}">
            <div id="glyphs" data-bind="foreach: glyphs">
                <span class="char-wrapper" data-bind="click: $parent.activateElement,
                    clickBubble: false,
                    dragMove: {draggable:active, top: top, left: left},
                    css: {active: active},
                    style: {
                        height: height() + 'px',
                        top: top() + 'px',
                        left: left() + 'px',
                        webkitTransform: 'rotate(' + angle() + 'deg)'}">
                    <span class="char-block" data-bind="text: char, style: {fontSize: fontSize() + 'px', fontFamily: fontFamily}"></span>
                </span>
            </div>
            <div id="points" data-bind="foreach: points">
                <span class="point" data-bind="click: $parent.activateElement,
                    clickBubble: false,
                    dragMove: {draggable:active, top: top, left: left},
                    css: {active: active},
                    style: {
                        top: top() + 'px',
                        left: left() + 'px'">
                </span>
            </div>
        </div>
        <button data-bind="click: addNewGlyph">Add New Glyph</button>
        <button data-bind="click: addNewPoint">Add New Path Point</button>
        <label>
            Background:
            <select data-bind="value: backImage, options: backgrounds, optionsCaption: 'none'"></select>
        </label>
        <fieldset class="toolbar" data-bind="if: activeGlyph">
            <legend>Glyph editor</legend>
            <label>Char: <input type="text" data-bind="value: activeGlyph().char"></label>
            <label>Font: <select data-bind="value: activeGlyph().fontFamily, options: fonts"></select></label>
            <label>Size: <input type="number" data-bind="value: activeGlyph().height"></label>
            <label>Top: <input type="number" data-bind="value: activeGlyph().top"></label>
            <label>Left: <input type="number" data-bind="value: activeGlyph().left"></label>
            <label>
                Rotate:
                <input type="range" data-bind="value: activeGlyph().angle" min="-180" max="180" step="5">
                (<span data-bind="text: activeGlyph().angle"></span>deg)
            </label>
            <button data-bind="click: deleteActiveGlyph">Delete</button>
        </fieldset>
        <textarea class="level-data" data-bind="value: jsonString, css: {error: isJSONInvalid}"></textarea>
    </body>
</html>